<template>
    <div class='portlet task-list ' :style="{'height': '100%'}">
        <div class='portlet-title'>
            <span>
                任务
            </span>
            <v-col class="text-center" cols="3" sm="1">
                <div class="my-2">
                    <v-btn small outlined style="border:1px solid #CFD8DC" @click="changeDisplayModel">添加任务</v-btn>
                </div>
            </v-col>
            <v-col class="text-right" >
                <v-btn depressed small color="white" >
                    <v-icon small>mdi-filter-outline</v-icon>
                    <span style="color:grey">筛选</span>
                </v-btn>
                &nbsp;
                <v-btn depressed small color="white">
                    <v-icon small>mdi-vector-arrange-below</v-icon>
                    <span style="color:grey">按清单分组</span>
                </v-btn>

                
            </v-col>
        </div>
        <div class="portlet-with-title">
        <!-- 测试 -->
              <view_dashboard_sysportlet1_list 
          :viewState="viewState"  
          :viewparams="viewparams" 
          :context="context" 
          createAction="Create"
          removeAction="Remove"
          updateAction="Update"
          fetchAction="FetchDefault"
          :showBusyIndicator="true"
          name="dashboard_sysportlet1_list"  
          ref='dashboard_sysportlet1_list' 
          @closeview="closeView($event)">
      </view_dashboard_sysportlet1_list>
        </div>
        <taskform
            
            createAction="Create"
            removeAction="Remove"
            updateAction="Update"
            fetchAction="FetchDefault"
            :showBusyIndicator="true"
            name="taskform"  
            ref='taskform' 
            @closeview="closeView($event)"
            v-show="!displayMode"
            >
            </taskform>
        <div class='ywcrw pt-3 pl-4 pb-3 pr-4'>
              <a href="javascript:void(0);">已完成任务</a>
          </div>
    </div>
</template>

<script lang='tsx'>
import { Component } from 'vue-property-decorator';
import ProjectTaskListBase from './task-list-portlet-base.vue';
import view_dashboard_sysportlet1_list from '@widgets/project/task-list-list/task-list-list.vue';
import taskform from '@widgets/task/add-task-form-form/add-task-form-form.vue';

 
@Component({
    components: {
        view_dashboard_sysportlet1_list, 
         taskform
    }
})
export default class ProjectTaskList extends ProjectTaskListBase {

    public rwlj:any =[
        { text: 'list', callback: () => console.log('list') },
        { text: 'favorite', callback: () => console.log('favorite') },
        { text: 'delete', callback: () => console.log('delete') },
      ]

    public displayMode: boolean = true;


     /**
   * 改变列表显示状态
   *
   */
  public changeDisplayModel() {
    this.displayMode = !this.displayMode;
  }
   


}
</script>
